HW4

Wizualizacja oryginalna znajduje się pod linkiem : https://arstechnica.com/gaming/2020/04/ars-analysis-80-of-steam-games-earn-under-5k-in-first-two-weeks/

Źródło danych

Niestety na stronie z wykresem do poprawy nie jest wskazane źródło danych. Więc samodzielnie stworzyłam plik z danymi na podstawie wykresu

Co trzeba naprawić?

Na tym wykresie jest bardzo trudno odczytać wartości, którym odpowiadają części kolumn każdego koloru, bo są to wartości z bardzo dużego zakresu (od 0 do 8000).

Liczby gier w rokach 2007 - 2011 są bardzo małe (w porównaniu z kolumnami późnejszych lat),więc ich prawie nie jest widać.

Według mnie kolory są dobrane w bardzo żły sposób. Bo kolory odpowiadają wartości ilościowej, więc mi się wydaje że warto użyć kolorów od jasnego do ciemnego(od mniejszego do największego).

Poprawianie

import numpy as np
import pandas as pd
from plotly.subplots import make_subplots
from plotly import tools
import plotly.graph_objs as go
from plotly.offline import iplot

games_data = pd.read_csv("data_games.csv")
games_data

	Year	Earnings	NumberOfGames
0	2007	$<5K	40
1	2007	$5K-10K	20
2	2007	$10K-50K	24
3	2007	$50K-100K	15
4	2007	$100K-250K	0
...	...	...	...
73	2019	$5K-10K	300
74	2019	$10K-50K	600
75	2019	$50K-100K	150
76	2019	$100K-250K	100
77	2019	$>250K	220

78 rows × 3 columns

from plotly.subplots import make_subplots
import plotly.graph_objects as go

earnings_data_dict = {}
colors = ['#f5deb3', '#FFD700', 'orange', '#FF5F1F', '#DC143C', '#4A0404']

fig = go.Figure()

for earnings in games_data['Earnings'].unique():
    earnings_data = games_data[games_data['Earnings'] == earnings]
    earnings_data_dict[earnings] = earnings_data

buttons = []
for earnings, data in earnings_data_dict.items():
    buttons.append(
        dict(
            label=str(earnings),
            method='update',
            args=[{'visible': [earnings == e for e in earnings_data_dict.keys()]}],
        )
    )

buttons.append(
    dict(
        label="All",
        method="update",
        args=[{'visible': [True] * len(earnings_data_dict)}],  
    )
)


for earnings, data in earnings_data_dict.items():
    fig.add_trace(go.Bar(
        x=data['Year'],
        y=data['NumberOfGames'],
        name=earnings,
        marker_color=colors[len(fig.data) % len(colors)],
        marker_line_color='black', 
        marker_line_width=1,
        visible=False))
    fig.data[len(fig.data) - 1].visible = True

    
fig.update_layout(
    title="Sales of steam games in first two weeks after launch",
    xaxis=dict(title='Year', dtick=1),
    yaxis=dict(title='Number of games'),
    barmode='stack',
    height=700,
    bargroupgap=0,
    plot_bgcolor='rgba(0,0,0,0)', 
    xaxis_showgrid=True, 
    yaxis_showgrid=True, 
    yaxis_gridcolor='lightgrey',
    updatemenus=[
        dict(
            type="buttons",
            direction="down",
            buttons=buttons,
            x=1.2,
            y=0.7
        ),
    ],
)

Dlaczego przygotowany wykres jest lepszy od oryginalnego?

Przygotowany wykres jest lepszy, bo jest interaktywny i daje możliwość odczytywania dokładnych danych, którym odpowiada każda część kolumny w roku(należy najechać kursorem na wybraną kolumnę). Oraz daje możliwość powiększenia dowolnego obszaru wykresu (prawie niewidoczne lata 2007-2011 stają się wtedy widoczne)

Została użyta bardziej pasująca paleta kolorów (od jasnego do ciemnego)

Zostały dodane jeszcze przyciski po prawej stronie od wykresu. Na wypadek jeżeli użytkownik będzie chciał zobaczyć na wykresie tylko gry, które są w jednym przedziale dochodów.(Tak naprawdę te przyciski nie są bardzo potrzebne, bo ich funkcjonał już wykona legenda w interaktymnym wykresie(przez podwójne kliknięcie), ale zrobiłam z punktu widzenia ćwiczeń ). Jeżeli uznać przyciski za niepotrzebne, to wystarczy dla poprawy wykresu poniżej:

fig1 = go.Figure()
colors = ['#f5deb3', '#FFD700', 'orange', '#FF5F1F', '#DC143C', '#4A0404']

for i, earnings in enumerate(games_data['Earnings'].unique()):
    earnings_data = games_data[games_data['Earnings'] == earnings]
    fig1.add_trace(go.Bar(
        x=earnings_data['Year'],
        y=earnings_data['NumberOfGames'],
        name=earnings,
        marker_color=colors[i % len(colors)],
        marker_line_color='black', 
        marker_line_width=1,
    ))

fig1.update_layout(
    title="Stacked Bar Plot",
    xaxis=dict(title='Year', dtick=1),
    yaxis=dict(title='Number of games'),
    barmode='stack',
    height=700,
    bargroupgap=0,
    plot_bgcolor='rgba(0,0,0,0)', 
    xaxis_showgrid=True, 
    yaxis_showgrid=True, 
    yaxis_gridcolor='lightgrey',
) 

fig1.write_html("wykres_bez_przyciskow.html")
fig.write_html("wykres_z_przyciskami.html")